<template>
  <a
    :class="$style.btn" :title="(allowSound?'':'不')+'允许声音'"
    @click="setSound()"
  >
    <Sound v-show="allowSound" :class="$style.soundIco" />
    <SoundNo v-show="!allowSound" :class="[$style.soundIco,$style.soundNoIco]" />
  </a>
</template>

<script>
import Sound from '@/view/ico/sound'
import SoundNo from '@/view/ico/SoundNo'
import dataApi from '@/view/data-api-edit.js'
export default {
  components: {
    Sound,
    SoundNo
  },
  props: {
    d: {
      type: Object,
      default: () => { return {} }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  computed: {
    allowSound () {
      return this.d.allowSound
    }
  },
  methods: {
    setSound () {
      dataApi.videoControlSoundSet(!this.d.allowSound, this.index)
    }
  }
}
</script>

<style module>
.btn {
  position: absolute;
  right: 4px;
  /* right: 34px; */
  top: 4px;
  width: 20px;
  height: 20px;
  background-color: #000;
  padding: 2px;

  background-size: 71%;
  cursor: pointer;
  box-sizing: content-box;
  opacity: 0.4;
  &:hover{
    opacity: 1;
  }
}
.soundIco {
    margin-left: -2px;
    margin-top: 3px;
    color: #fff;
    width: 24px;
    height: 14px;
  position: absolute;
}
.soundNoIco {
  margin-left: -4px;
}
</style>
